<template>
  <div class="container">
    <div class="container_page">
      <page-header :title="$t('set_setting')"></page-header>
      <div class="list">
        <div class="item" @click="showLang">
          <div class="left">
            <div class="title">{{ $t('set_selectLanguage') }}</div>
          </div>
          <div class="right">
            <div class="right_title flex_center">
              {{ $t(getCurrentLang.label) }}
            </div>
            <img
              :src="require('@/assets/img/setting/porfile_ic_right@2x.png')"
            />
          </div>
        </div>
        <!-- <div class="divider"></div>
        <div class="item">
          <div class="left">
            <div class="title">{{ $t("Version") }}</div>
          </div>
          <div class="right">
            <div class="right_title">V1.0.0</div>
          </div>
        </div> -->
        <div class="divider"></div>
        <div class="item" @click="jumpTerm">
          <div class="left">
            <div class="title">{{ $t('login_termOfUse') }}</div>
          </div>
          <div class="right">
            <img
              :src="require('@/assets/img/setting/porfile_ic_right@2x.png')"
            />
          </div>
        </div>
        <div class="divider"></div>
        <div class="item" @click="jumpPrivacy">
          <div class="left">
            <div class="title">{{ $t('loginPrivacyPolice') }}</div>
          </div>
          <div class="right">
            <img
              :src="require('@/assets/img/setting/porfile_ic_right@2x.png')"
            />
          </div>
        </div>
        <div class="divider"></div>
        <div class="item" @click="jumpAccount">
          <div class="left">
            <div class="title">{{ $t('Cancellation_Title') }}</div>
          </div>
          <div class="right">
            <img
              :src="require('@/assets/img/setting/porfile_ic_right@2x.png')"
            />
          </div>
        </div>        
        <div class="divider"></div>
      </div>
      <bottom-button
        :title="$t('set_logout')"
        background="var(--page-bg)"
        @click="isShowLoginOutDialog = true"
      ></bottom-button>
      <!-- 语言切换 -->
      <van-dialog v-model="isShowLangDialog" :showConfirmButton="false">
        <div class="title">{{ $t('set_selectLanguage') }}</div>
        <div class="langBox">
          <div
            class="item"
            v-for="item in langList"
            @click="lang = item"
            :key="item.key"
          >
            <span>{{ $t(item.label) }}</span>
            <img
              v-if="item.key == lang.key"
              :src="require('@/assets/img/user/profile_ic_selected.svg')"
            />
          </div>
        </div>
        <div class="btns">
          <div class="btn flex_center" @click="cancelLang">
            {{ $t('profile_cancel') }}
          </div>
          <div class="btn flex_center" @click="saveLang">
            {{ $t('home_confirm') }}
          </div>
        </div>
      </van-dialog>
      <!-- 退出登录 -->
      <van-dialog v-model="isShowLoginOutDialog" :showConfirmButton="false">
        <div class="title">{{ $t('set_logout') }}</div>
        <div class="login_out_box">
          {{ $t('set_comfirmLogout') }}
        </div>
        <div class="btns">
          <div class="btn flex_center" @click="isShowLoginOutDialog = false">
            {{ $t('profile_cancel') }}
          </div>
          <div class="btn flex_center" @click="loginOut">
            {{ $t('home_confirm') }}
          </div>
        </div>
      </van-dialog>
    </div>
  </div>
</template>

<script>
import $api from '@/assets/js/api/index'
import share from '@/mixins/share'
export default {
  mixins: [share],
  data () {
    return {
      userUrls: '',
      privacyUrls: '',
      isShowLangDialog: false,
      isShowLoginOutDialog: false,
      lang: { label: 'Chinese', key: 'ZH', moment: 'zh-cn' },
      langList: [
        { label: 'English', key: 'EN', moment: 'en' },
        { label: 'Chinese', key: 'ZH', moment: 'zh-cn' },
        { label: 'Spanish', key: 'ES', moment: 'es' },
        { label: 'Việt Nam', key: 'VI', moment: 'vi' },
      ]
    }
  },
  created () {
    this.getLang()
  },
  computed: {
    getCurrentLang () {
      return this.langList.find(item => item.key == this.$i18n.locale)
    }
  },
  methods: {
    //获取配置数据
    getConfigs () {
      const configs = JSON.parse(localStorage.getItem('configs'))
      configs.forEach(item => {
        if (item.key == 'terms-of-use') {
          this.userUrls = item.value
        }
        if (item.key == 'privacy-policy') {
          this.privacyUrls = item.value
        }
      })
    },
    //用户协议
    jumpTerm () {
      if (!this.userUrls) return
      localStorage.setItem(
        'webUrl',
        JSON.stringify({
          url: `${this.userUrls}?lang=${this.$store.state.locale}`,
          title: 'login_termOfUse'
        })
      )

      this.$router.push({
        path: '/web-view'
      })
    },

    //隐私政策
    jumpPrivacy () {
      if (!this.userUrls) return
      localStorage.setItem(
        'webUrl',
        JSON.stringify({
          url: `${this.privacyUrls}?lang=${this.$store.state.locale}`,
          title: 'loginPrivacyPolice'
        })
      )
      this.$router.push({
        path: '/web-view'
      })
    },
    showLang () {
      this.lang = this.getCurrentLang
      this.isShowLangDialog = true
    },
    cancelLang () {
      this.isShowLangDialog = false
    },
    saveLang () {
      const lang = this.lang
      $api.user.switchLang({ abb: lang.key }).then(res => {
        if (res.code != 0) {
          this.global.toast(res.message)
          return
        }
        this.$i18n.locale = lang.key
        this.$moment.locale(lang.moment)
        localStorage.setItem('lang', lang.key)
        localStorage.setItem('moment_lang', lang.moment)
        this.$store.commit('SET_LANG', lang.key)
        this.isShowLangDialog = false
      })
    },
    loginOut () {
      this.$store.commit('login_out')
      this.isShowLoginOutDialog = false
    },
    jumpAccount () {
      this.$router.push({
        path: '/account'
      })
    }  
  },
  mounted () {
    this.getConfigs()
    this.lang = this.getCurrentLang
  }
}
</script>
<style scoped lang="scss">
.container_page {
  margin: 0;
  background-color: #f5f5f7;
  width: 100%;
  flex: 1;
  box-sizing: border-box;
}
.divider {
  height: 4px;
  background-color: #f0f0f2;
}
.list {
  padding-top: 10px;
  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 52px;
    background-color: #f5f5f7;

    .left {
      flex: 1;
      font-size: 14px;
      font-weight: 500;
      color: #383838;
    }
    .right {
      display: flex;
      align-items: center;
      img {
        width: 6px;
        height: 10px;
        margin-left: 10px;
        // transform: translateY(3px);
      }
      .right_title {
        font-size: 14px;
        font-weight: 600;
        color: #383838;
      }
    }
  }
}
.langBox {
  background-color: var(--card-color);

  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 52px;
    padding: 0 var(--gap);
    border-bottom: #eeeef5 1px solid;
    &:nth-last-child(1) {
      border: none;
    }
    span {
      font-size: 14px;
      color: #383838;
    }
    img {
      width: 20px;
      height: 20px;
    }
  }
}
.login_out_box {
  text-align: center;
  padding-bottom: var(--gap);
}
</style>
